<template>
  <div class="box">
    <!-- 头部导航 -->
    <div class="header">
      <div class="back-btn" @click="handleBack">
        <i class="fas fa-arrow-left"></i>
      </div>
      <div class="header-title">测评</div>
      <div class="back-btn" style="visibility: hidden">
        <i class="fas fa-arrow-left"></i>
      </div>
    </div>

    <div class="assessment-content">
      <div class="container">
        <!-- 介绍卡片 -->
        <div class="intro-card" v-show="currentStep === 'intro'">
          <div class="intro-icon">
            <i class="fas fa-user-friends"></i>
          </div>
          <div class="intro-title">测评介绍</div>
          <div class="intro-text">
            <p>
              心理学研究表明，多数心理风险会通过可观察的行为信号表现出来，作为与员工密切合作的职场伙伴，您在日常互动中观察到的行为细节，往往能帮助我们更早发现员工可能面临的心理困扰。
            </p>
            <p style="margin-top: 15px">
              感谢您在繁忙的工作中参与这项富有意义的员工关怀计划。
            </p>
            <p style="margin-top: 15px; font-weight: 600; color: #5b67ff">
              请根据您近期观察到同事的行为或表现进行填写，您的反馈将匿名化处理，评估结果仅用于制定支持方案，请您放心填写。
            </p>
          </div>
        </div>

        <!-- 测评对象表单 -->
        <div class="subject-form" v-show="currentStep === 'form'">
          <div class="form-group">
            <label for="subjectName" class="form-label">测评对象姓名</label>
            <input
              type="text"
              id="subjectName"
              class="form-input"
              v-model="subjectInfo.name"
              placeholder="请输入您要评估的人的姓名"
            />
          </div>
          <div class="form-group">
            <label for="subjectBumen" class="form-label">测评对象部门</label>
            <input
              type="text"
              id="subjectBumen"
              class="form-input"
              v-model="subjectInfo.bumen"
              placeholder="请输入您要评估的人的部门"
            />
          </div>

          <div class="progress-container" v-if="currentStep === 'form'">
            <div class="progress-header">
              <div class="progress-title">测评进度</div>
              <div class="progress-count">{{ progressCountText }}</div>
            </div>
            <div class="progress-bar">
              <div
                class="progress-fill"
                :style="{ width: progressPercentage + '%' }"
              ></div>
            </div>
            <div class="progress-text">{{ progressPercentage }}% 已完成</div>
          </div>
        </div>

        <!-- 测评问题卡片 -->
        <div
          class="question-card"
          v-for="(question, index) in processedQuestions"
          :key="question.id"
          v-show="currentStep === 'questions' && currentQuestionIndex === index"
        >
          <div class="question-number">
            问题 {{ index + 1 }}/{{ processedQuestions.length }}
          </div>
          <div class="question-text">{{ question.subject }}</div>

          <div class="options-container" v-if="question.type === 'radio'">
            <div
              class="option-item"
              v-for="(option, optIndex) in question.answerOptions"
              :key="optIndex"
              :class="{ selected: answers[question.id] === option }"
              @click="selectAnswer(question.id, option)"
            >
              <div class="option-radio"></div>
              <div class="option-text">{{ option }}</div>
            </div>
          </div>

          <div class="input-container" v-else-if="question.type === 'input'">
            <textarea
              class="form-textarea"
              v-model="answers[question.id]"
              placeholder="请输入您的反馈情况"
              rows="4"
            ></textarea>
          </div>

          <div class="nav-buttons">
            <button
              class="nav-btn btn-prev"
              @click="prevQuestion"
              :disabled="index === 0"
            >
              <i class="fas fa-arrow-left"></i>
              上一题
            </button>

            <button
              class="nav-btn"
              :class="{
                'btn-next': index < processedQuestions.length - 1,
                'btn-submit': index === processedQuestions.length - 1,
                'btn-disabled': !isAnswerSelected(question.id) || loading,
              }"
              @click="nextQuestion"
              :disabled="!isAnswerSelected(question.id) || loading"
            >
              <span v-if="index < processedQuestions.length - 1">
                下一题
                <i class="fas fa-arrow-right"></i>
              </span>
              <span v-else>
                <i class="fas fa-paper-plane"></i>
                提交测评
              </span>
            </button>
          </div>
        </div>

        <!-- 测评结果卡片 -->
        <div class="result-card" v-show="currentStep === 'result'">
          <div class="result-icon">
            <i class="fas fa-chart-pie"></i>
          </div>
          <div class="result-title">测评结果</div>

          <div class="result-text" v-if="report && reportLoaded">
            <div style="margin-bottom: 12px">
              测评对象：
              <span style="font-weight: 600; color: #5b67ff">{{
                subjectInfo.name
              }}</span>
              （{{ subjectInfo.bumen }}）
            </div>

            <div style="margin-bottom: 12px">
              风险等级：
              <span
                style="font-weight: 700; color: #d9534f"
                v-if="report.riskLevel === '高'"
                >高</span
              >
              <span
                style="font-weight: 700; color: #f0ad4e"
                v-else-if="report.riskLevel === '中'"
                >中</span
              >
              <span style="font-weight: 700; color: #5cb85c" v-else>低</span>
            </div>

            <div class="detail-row" style="margin-bottom: 6px">
              <div class="detail-label">测评时间</div>
              <div class="detail-value">{{ currentTime }}</div>
            </div>

            <div class="report-info" style="text-align: left; margin-top: 18px">
              <!-- 后端返回的 HTML 信息直接渲染 -->
              <div v-html="report.info"></div>
            </div>
          </div>

          <div v-else-if="loading" style="padding: 24px">提交中，请稍候...</div>

          <div v-else style="padding: 24px">
            未获取到测评结果，请检查网络或稍后重试。
          </div>
        </div>
      </div>

      <!-- 底部操作栏 -->
      <div class="action-bar" v-show="showActionBar">
        <button
          class="action-btn"
          :class="{
            'btn-start': currentStep === 'intro' || currentStep === 'form',
            'btn-restart': currentStep === 'result',
          }"
          @click="handleActionButton"
          :disabled="loading"
        >
          <i
            :class="{
              'fas fa-play': currentStep === 'intro' || currentStep === 'form',
              'fas fa-redo': currentStep === 'result',
            }"
          ></i>
          {{ actionButtonText }}
        </button>

        <button class="action-btn2 btn-start" @click="gohome()">
          返回首页
        </button>
      </div>

      <!-- 消息提示 -->
      <div
        v-if="showMessage"
        class="message-toast"
        :style="{ background: messageColor }"
      >
        {{ messageText }}
      </div>
    </div>
  </div>
</template>

<script>
import { saveEvoQuestion } from "../../api/manager"; // 保留你的 API 引入路径

export default {
  name: "PersonalityAssessment",
  data() {
    return {
      currentStep: "intro", // intro, form, questions, result
      currentQuestionIndex: 0,
      subjectInfo: {
        name: "",
        bumen: "",
      },
      answers: {},
      showMessage: false,
      messageText: "",
      messageColor: "#5b67ff",
      messageTimeout: null,

      questionData: [
        {
          subject: "1. 容易烦躁、发怒或情绪起伏很大？ ",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1282,
        },
        {
          subject: "2. 多次与同事发生争执或冲突？",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1283,
        },
        {
          subject: "3. 表现出持续的情绪低落、沮丧或缺乏活力？",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1284,
        },
        {
          subject: "4. 对原本感兴趣的活动失去热情？",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1285,
        },
        {
          subject: "5. 比往常孤僻、敏感、多疑等？",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1286,
        },
        {
          subject: "6. 胡言乱语、行为怪异（如：突然大喊大叫）？",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1287,
        },
        {
          subject: "7. 透露出想轻生的念头或企图（如：托人/托事/托物）？",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1288,
        },
        {
          subject: "8. 经常出现无故缺勤、迟到或早退的情况？",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1289,
        },
        {
          subject: "9. 工作效率明显下降？",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1290,
        },
        {
          subject: "10. 工作质量不达标，频繁出现错误或失误？ ",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1291,
        },
        {
          subject: "11. 经历了生活或工作中的重大变故（如家人去世，离异等）?",
          part: 1,
          type: "radio",
          answer: { value: ["有", "无", "不清楚"] },
          id: 1292,
        },
        {
          subject: "12. 其他想要反馈的情况：",
          part: 1,
          type: "input",
          answer: {},
          id: 1293,
        },
      ],

      // 时间与报告
      currentTime: this.getCurrentTime(),
      startTime: this.getCurrentTimeWithSeconds(),
      report: null,
      reportLoaded: false,
      loading: false,
    };
  },

  computed: {
    processedQuestions() {
      return this.questionData.map((question) => {
        if (
          question.type === "radio" &&
          question.answer &&
          question.answer.value
        ) {
          return {
            ...question,
            answerOptions: question.answer.value,
          };
        } else if (question.type === "input") {
          return {
            ...question,
            answerOptions: [],
          };
        }
        return question;
      });
    },

    progressCountText() {
      if (this.currentStep === "intro" || this.currentStep === "form") {
        return `0/${this.processedQuestions.length} 已完成`;
      } else if (this.currentStep === "questions") {
        return `${this.answeredQuestionsCount}/${this.processedQuestions.length} 已完成`;
      } else {
        return `${this.processedQuestions.length}/${this.processedQuestions.length} 已完成`;
      }
    },

    progressPercentage() {
      if (this.currentStep === "intro" || this.currentStep === "form") {
        return 0;
      } else if (this.currentStep === "questions") {
        return Math.round(
          (this.answeredQuestionsCount / this.processedQuestions.length) * 100
        );
      } else {
        return 100;
      }
    },

    answeredQuestionsCount() {
      return this.processedQuestions.filter((question) => {
        const answer = this.answers[question.id];
        // 这里明确把 '', null, undefined 认定为未答，'0' 或 0 会被视为已答
        return answer !== "" && answer !== null && answer !== undefined;
      }).length;
    },

    showActionBar() {
      return (
        this.currentStep === "intro" ||
        this.currentStep === "form" ||
        this.currentStep === "result"
      );
    },

    actionButtonText() {
      if (this.currentStep === "intro" || this.currentStep === "form") {
        return "开始测评";
      } else if (this.currentStep === "result") {
        return "重新测评";
      }
      return "";
    },
  },

  created() {
    // 初始化答案对象，以题目id为键，默认空字符串
    this.questionData.forEach((question) => {
      this.$set(this.answers, question.id, "");
    });
  },

  methods: {
    handleBack() {
      if (this.currentStep === "form") {
        this.currentStep = "intro";
      } else if (this.currentStep === "questions") {
        if (this.currentQuestionIndex === 0) {
          this.currentStep = "form";
        } else {
          this.currentQuestionIndex--;
        }
      } else if (this.currentStep === "result") {
        // 返回测评列表（你现有的路由行为）
        this.$router.back();
        this.displayMessage("返回测评列表", "#5b67ff");
      } else {
        this.$router.back();
        this.displayMessage("返回测评列表", "#5b67ff");
      }
    },

    handleActionButton() {
      if (this.currentStep === "intro") {
        this.currentStep = "form";
      } else if (this.currentStep === "form") {
        this.validateForm();
      } else if (this.currentStep === "result") {
        this.resetAssessment();
      }
    },

    validateForm() {
      if (!this.subjectInfo.name || !this.subjectInfo.name.trim()) {
        this.displayMessage("请输入测评对象姓名", "#ffc046");
        return;
      }
      if (!this.subjectInfo.bumen || !this.subjectInfo.bumen.trim()) {
        this.displayMessage("请输入测评对象部门", "#ffc046");
        return;
      }

      this.currentStep = "questions";
      this.currentQuestionIndex = 0;
      // 记录新的开始时间
      this.startTime = this.getCurrentTimeWithSeconds();
    },

    selectAnswer(questionId, value) {
      // 直接保存字符串（支持 '0' 等值）
      this.$set(this.answers, questionId, value);
    },

    isAnswerSelected(questionId) {
      const answer = this.answers[questionId];
      return answer !== "" && answer !== null && answer !== undefined;
    },
    gohome() {
      this.$router.go(-1);
    },

    nextQuestion() {
      if (this.currentQuestionIndex < this.processedQuestions.length - 1) {
        this.currentQuestionIndex++;
      } else {
        // 最后一题直接提交
        this.submitAssessment();
      }
    },

    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--;
      }
    },

    async submitAssessment() {
      // 防重复提交
      if (this.loading) return;

      // 检查是否所有问题都已回答
      const unansweredQuestions = this.processedQuestions.filter(
        (question) => !this.isAnswerSelected(question.id)
      );

      if (unansweredQuestions.length > 0) {
        this.displayMessage("请回答所有问题后再提交", "#ffc046");
        return;
      }

      // 构建提交数据（保持你原来的结构）
      const submitData = {
        name: this.subjectInfo.name,
        bumen: this.subjectInfo.bumen,
        data: [],
        starttime: this.startTime,
        userId: localStorage.getItem("userId"),
      };

      this.processedQuestions.forEach((question) => {
        submitData.data.push(this.answers[question.id]);
      });

      // 开始提交
      this.loading = true;
      this.displayMessage("提交中...", "#5b67ff");

      try {
        // 调用你自己的 API（确保 saveEvoQuestion 返回一个 Promise 并且结构类似你的示例）
        const res = await saveEvoQuestion(submitData);

        // 安全判断：如果 res.data 存在 riskLevel / info，那就渲染，否则提示错误
        if (res && res.code === 200 && res.data) {
          this.report = {
            riskLevel: res.data.riskLevel || "",
            info: res.data.info || "",
          };
          this.reportLoaded = true;
          this.currentStep = "result";
          this.currentTime = this.getCurrentTime();
          this.displayMessage(res.message || "提交成功", "#48d597");
        } else {
          // 如果你的接口返回格式不同，可在这里调整
          this.displayMessage(
            (res && res.message) || "提交成功，未返回报告",
            "#48d597"
          );
          // 仍切换到结果页并尝试显示返回内容
          this.report = (res && res.data) || null;
          this.reportLoaded = !!res.data;
          this.currentStep = "result";
        }
      } catch (err) {
        console.error("提交失败：", err);
        this.displayMessage("提交失败，请检查网络或重试", "#ff6b6b");
      } finally {
        this.loading = false;
      }
    },

    resetAssessment() {
      this.displayMessage("重置测评...", "#5b67ff");

      // 重置数据
      this.subjectInfo = {
        name: "",
        bumen: "",
      };

      // 重置答案
      this.questionData.forEach((question) => {
        this.$set(this.answers, question.id, "");
      });

      this.currentStep = "intro";
      this.currentQuestionIndex = 0;
      this.currentTime = this.getCurrentTime();
      this.startTime = this.getCurrentTimeWithSeconds();
      this.report = null;
      this.reportLoaded = false;
    },

    displayMessage(text, color) {
      this.messageText = text;
      this.messageColor = color || "#5b67ff";
      this.showMessage = true;

      if (this.messageTimeout) {
        clearTimeout(this.messageTimeout);
      }
      this.messageTimeout = setTimeout(() => {
        this.showMessage = false;
      }, 3000);
    },

    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const hour = now.getHours();
      const minute = now.getMinutes();

      return `${year}年${month}月${day}日 ${hour}:${
        minute < 10 ? "0" + minute : minute
      }`;
    },

    getCurrentTimeWithSeconds() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();

      return `${year}-${month < 10 ? "0" + month : month}-${
        day < 10 ? "0" + day : day
      } ${hour}:${minute < 10 ? "0" + minute : minute}:${
        second < 10 ? "0" + second : second
      }`;
    },
  },
};
</script>

<style scoped>
.assessment-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
  margin: 0 auto;
}
.box {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  background: white;
}
/* 头部导航 */
.header {
  max-width: 500px;
  margin: 0 auto;
  background: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a233d;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  cursor: pointer;
}

/* 介绍卡片 */
.intro-card {
  background: white;
  padding: 25px;
  box-sizing: border-box;
  text-align: center;
}

.intro-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  font-size: 2.5rem;
  margin: 0 auto 20px;
}

.intro-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #1a233d;
}

.intro-text {
  font-size: 1.05rem;
  color: #8a94a6;
  margin-bottom: 25px;
  line-height: 1.7;
  text-align: left;
}

/* 测评对象表单 */
.subject-form {
  background: white;
  border-radius: 18px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
}

.form-group {
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a233d;
}

.form-input {
  padding: 14px 16px;
  border: 1px solid #e7ebf3;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #5b67ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 103, 255, 0.2);
}

/* 测评问题卡片 */
.question-card {
  background: white;
  border-radius: 18px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
}

.question-number {
  font-size: 0.9rem;
  color: #b0b8c5;
  margin-bottom: 15px;
}

.question-text {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 25px;
  line-height: 1.5;
}

/* 选项样式 */
.options-container {
  margin-top: 20px;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: #eef0ff;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.option-item:hover {
  background: white;
  border-color: #5b67ff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(134, 151, 206, 0.15);
}

.option-item.selected {
  background: white;
  border-color: #5b67ff;
  box-shadow: 0 5px 15px rgba(134, 151, 206, 0.15);
}

.option-radio {
  width: 22px;
  height: 22px;
  border: 2px solid #b0b8c5;
  border-radius: 50%;
  margin-right: 15px;
  position: relative;
  flex-shrink: 0;
}

.option-item.selected .option-radio {
  border-color: #5b67ff;
}

.option-radio::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 12px;
  height: 12px;
  background: #5b67ff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.option-item.selected .option-radio::after {
  opacity: 1;
}

.option-text {
  font-size: 1rem;
  color: #1a233d;
}

/* 导航按钮 */
.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.nav-btn {
  padding: 14px 25px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
}

.btn-prev {
  background: white;
  color: #5b67ff;
  border: 1px solid #5b67ff;
}

.btn-prev:hover:not(:disabled) {
  background: #eef0ff;
}

.btn-next {
  background: #5b67ff;
  color: white;
  box-shadow: 0 6px 18px rgba(91, 103, 255, 0.3);
}

.btn-next:hover:not(:disabled) {
  background: #4a54e5;
  transform: translateY(-3px);
}

.btn-submit {
  background: #48d597;
  color: white;
  box-shadow: 0 6px 18px rgba(72, 213, 151, 0.3);
}

.btn-submit:hover:not(:disabled) {
  background: #3ac389;
  transform: translateY(-3px);
}

.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #e7ebf3;
  color: #8a94a6;
  box-shadow: none;
}

/* 测评进度 */
.progress-container {
  margin: 25px 0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.progress-title {
  font-weight: 600;
  color: #1a233d;
}

.progress-count {
  color: #b0b8c5;
  font-size: 0.95rem;
}

.progress-bar {
  height: 8px;
  background: #e7ebf3;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 5px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #5b67ff, #8c52ff);
  border-radius: 10px;
  transition: width 0.5s ease;
}

.progress-text {
  text-align: right;
  font-size: 0.85rem;
  color: #b0b8c5;
}

/* 测评结果卡片 */
.result-card {
  background: white;
  border-radius: 18px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 6px 20px rgba(134, 151, 206, 0.15);
  text-align: center;
}

.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  font-size: 2.5rem;
  margin: 0 auto 20px;
}

.result-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #1a233d;
}

.result-text {
  font-size: 1.05rem;
  color: #8a94a6;
  margin-bottom: 25px;
  line-height: 1.7;
}

.result-details {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #e7ebf3;
  text-align: left;
}

.detail-row {
  display: flex;
  margin-bottom: 15px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  width: 120px;
  font-weight: 600;
  color: #8a94a6;
}

.detail-value {
  flex: 1;
  color: #1a233d;
}

/* 底部操作栏 */
.action-bar {
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 100;
  position: sticky;
  padding: 16px 0;
  background: white;
}

.action-btn {
  padding: 15px 30px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
}
.action-btn2 {
  padding: 15px 40px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
}

.btn-start {
  background: #5b67ff;
  color: white;
  box-shadow: 0 6px 18px rgba(91, 103, 255, 0.3);
}

.btn-start:hover {
  background: #4a54e5;
  transform: translateY(-3px);
}

.btn-restart {
  background: #5b67ff;
  color: white;
  box-shadow: 0 6px 18px rgba(91, 103, 255, 0.3);
}

.btn-restart:hover {
  background: #4a54e5;
  transform: translateY(-3px);
}

/* 消息提示 */
.message-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  padding: 14px 30px;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  animation: fadeIn 0.5s;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px) translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .question-text {
    font-size: 1.1rem;
  }

  .option-text {
    font-size: 0.95rem;
  }

  .result-title {
    font-size: 1.4rem;
  }

  .result-score {
    font-size: 2.4rem;
  }

  .nav-buttons {
    flex-direction: center;
    gap: 15px;
  }

  .nav-btn {
    width: 100%;
  }
  .form-textarea {
    padding: 14px 16px;
    border: 1px solid #e7ebf3;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
  }
}
</style>
